<template>
  <div class="home pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>品牌首页
    </div>
    <div class="section">
      <div class="img-box">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <!-- <img src="../assets/img/home_banner.png" alt="" /> -->
            <img v-lazy="ImgDomin(image.banner)" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 优男靓女 -->
      <div class="module">
        <div class="head-box flex-between">
          <div class="left flex-align">
            <div class="bg-line"></div>
            <div class="title">优男靓女</div>
          </div>
          <div class="right flex-align" @click="redirect1()">
            <span>更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div
          class="item"
          v-for="(item1, index1) in dataList1"
          :key="index1"
          @click="goPretty(item1.id)"
          style="justify-content: space-between;"
        >
          <div class="left">
            <div class="title">
              {{ item1.title }}
            </div>
            <div class="time-box">
              <div>发布单位：{{ item1.brandName }}</div>
              <div>发布时间：{{ item1.createTime }}</div>
            </div>
          </div>
          <div class="right">
            <img v-lazy="ImgDomin(item1.banner)" alt="" />
            <div class="dianzan flex-between">
              <div class="flex-align">
                <i class="iconfont icon-yanjing"></i>
                {{ item1.viewNum || 0 }}
              </div>
              <div class="flex-align">
                <i class="iconfont icon-dianzan"></i>
                {{ item1.praiseNum || 0 }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 精彩花絮 -->
      <div class="module">
        <div class="head-box flex-between">
          <div class="left flex-align">
            <div class="bg-line"></div>
            <div class="title">精彩花絮</div>
          </div>
          <div class="right flex-align" @click="redirect2()">
            <span>更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div
          class="item"
          v-for="(item2, index2) in dataList2"
          :key="index2"
          @click="goGags(item2.id)"
        >
          <div class="left">
            <div class="title multipe">
              {{ item2.title }}
            </div>
            <div class="time-box">
              <div>发布单位：{{ item2.brandName }}</div>
              <div>发布时间：{{ item2.createTime }}</div>
            </div>
          </div>
          <div class="right">
            <img v-lazy="ImgDomin(item2.coverImg)" alt="" />
            <div class="dianzan flex-between">
              <div class="flex-align">
                <i class="iconfont icon-yanjing"></i>
                {{ item2.browseNum || 0 }}
              </div>
              <div class="flex-align">
                <i class="iconfont icon-dianzan"></i>
                {{ item2.praiseNum || 0 }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 活动报名 -->
      <div class="module">
        <div class="head-box flex-between">
          <div class="left flex-align">
            <div class="bg-line"></div>
            <div class="title">活动报名</div>
          </div>
          <div class="right flex-align" @click="redirect3()">
            <span>更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div
          class="item"
          v-for="(item3, index3) in dataList3"
          :key="index3"
          @click="goActivity(item3.id)"
          style="justify-content: space-between;"
        >
          <div class="left">
            <div class="title multipe">
              {{ item3.activityTitle }}
            </div>
            <div class="time-box">
              <div>发布单位：{{ item3.brandName }}</div>
              <div>发布时间：{{ item3.createTime }}</div>
            </div>
          </div>
          <div class="right">
            <img v-lazy="ImgDomin(item3.coverImg)" alt="" />
            <div class="dianzan flex-between">
              <div class="flex-align">
                <i class="iconfont icon-yanjing"></i>
                {{ item3.browseNum || 0 }}
              </div>
              <div class="flex-align">
                <i class="iconfont icon-dianzan"></i>
                {{ item3.praiseNum || 0 }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 组织联谊 -->
      <!-- <div class="module">
        <div class="head-box flex-between">
          <div class="left flex-align">
            <div class="bg-line"></div>
            <div class="title">组织联谊</div>
          </div>
          <div class="right flex-align" @click="redirect4()">
            <span>更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div
          class="item"
          v-for="(item4, index4) in dataList4"
          :key="index4"
          @click="goFellowship(item4.id)"
        >
          <div class="left">
            <div class="title multipe">
              {{ item4.title }}
            </div>
            <div class="time-box">
              <div>发布单位：{{ item4.organization }}</div>
              <div>发布时间：{{ item4.createTime }}</div>
            </div>
          </div>
          <div class="right">
            <img v-lazy="ImgDomin(item4.coverImg)" alt="" />
            <div class="dianzan flex-between">
              <div class="flex-align">
                <i class="iconfont icon-yanjing"></i>
              </div>
              <div class="flex-align">
                <i class="iconfont icon-dianzan"></i>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <!-- 品牌首页的交友品牌 -->
      <div class="module module1">
        <div class="head-box flex-between">
          <div class="title">交友品牌</div>
          <div class="right flex-align" @click="onThirdLoginUrl($route.query.id)">
            <span>查看品牌详情</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div class="bland-box">
          <div class="bland-box-img">
            <img v-lazy="brandInfo.publicity" alt="" />
          </div>
          <div class="con">
            <div class="bland-title">{{ brandInfo.brandName }}</div>
            <div class="bland-desc">
              {{ brandInfo.introduce }}
            </div>
            <div class="join-btn flex-center" @click="join(brandInfo.id)">
              加入会员
            </div>
          </div>
        </div>
      </div>
    </div>
    <footerNav></footerNav>
  </div>
</template>

<script>
import footerNav from "@/components/footerNav";
import { getSwiperList, getPrettyManGirl } from "@/api/pretty";
import { getfsNewslist, getActivitylist } from "@/api/activity";
import { getGroup } from "@/api/fellowship";
import { getbrandinfo, applyJoinBrand } from "@/api/brand";
import { getPersonalInfo } from "@/api/users";
import useLogin from "@/hooks/use-Login";
import {onMounted} from '@vue/composition-api'
import {thirdLoginUrl} from '@/api/thirdLoginUrl'
export default {
  name: "Home",
  setup(props,ctx){
    const {isNotLogin,isLogin}  =useLogin(ctx.root)
    //第三方免登操作
    const onThirdLoginUrl=id=>{
      const token = localStorage.getItem('jyToken')
      thirdLoginUrl({id,token}).then(res=>{
       const {code,msg,data} =res
        if(code===0){
          window.location.href=data
        }else{
          isNotLogin({code,url:ctx.root.$route.fullPath})
        }
      }).catch(e=>{
        console.log(e);
      })
    }
    return {
      onThirdLoginUrl
    }

  },
  components: {
    footerNav,
  },
  data() {
    return {
      list: [
        {
          title: "名称",
        },
        {
          title: "名称",
        },
        {
          title: "名称",
        },
        {
          title: "名称",
        },
      ],
      images: [],
      dataList1: [], //优男靓女列表
      dataList2: [], //花絮列表
      dataList3: [], //活动报名列表
      dataList4: [], //组织联谊列表
      brandInfo: {}, //交友品牌列表
    };
  },
  created() {
    this.getSwiper();
    this.getList1();
    this.getList2();
    this.getList3();
    // this.getList4();
    this.getBrandInfo(this.$route.query.id);
  },
  methods: {
    // 获取轮播图
    getSwiper() {
      getSwiperList({
        current: 1,
        size: 5,
      }).then((res) => {
        if (res.code == 0) {
          this.images = res.data;
        }
      });
    },
    // 获取优男靓女列表
    getList1() {
      getPrettyManGirl({
        pageNo: 1,
        pageSize: 2,
        brandId: this.$route.query.id,
      }).then((res) => {
        if (res.code == 0) {
          this.dataList1 = res.data.records;
        }
      });
    },
    // 获取花絮列表
    getList2() {
      getfsNewslist({
        pageNo: 1,
        pageSize: 2,
        brandId: this.$route.query.id,
      }).then((res) => {
        if (res.code == 0) {
          this.dataList2 = res.data.records;
        }
      });
    },
    // 获取活动报名列表
    getList3() {
      getActivitylist({
        current: 1,
        size: 2,
        brandId: this.$route.query.id,
      }).then((res) => {
        if (res.code == 0) {
          this.dataList3 = res.data.records;
        }
      });
    },
    // 获取组织联谊列表
    getList4() {
      getGroup({
        current: 1,
        size: 2,
      }).then((res) => {
        if (res.code == 0) {
          this.dataList4 = res.data.records;
        }
      });
    },
    // 获取品牌详情
    getBrandInfo(id) {
      getbrandinfo({
        id: id,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.brandInfo = res.data;
        }
      });
    },
    join(id) {
      if (!localStorage.getItem("jyToken")) {
        return this.$router.replace({
          name: "Login",
          query: { dirUrlName: "BrandHome" },
        });
      }
      applyJoinBrand({
        brandId: id,
        brandIntroduce: "123",
      })
        .then((res) => {
          if (res.code == 0) {
            this.$toast("加入成功");
            this.getUserInfo();
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("加入失败，请稍后重试！");
        });
    },
    // 获取个人信息（取其中的品牌信息）
    getUserInfo() {
      getPersonalInfo().then((res) => {
        if (res.code == 0) {
          // this.info = res.data.fsBrandVO;
          let userInfo = localStorage.getItem("userInfo");
          if (userInfo) {
            userInfo = JSON.parse(userInfo);
            userInfo.fsBrandVO = res.data.fsBrandVO;
            localStorage.setItem("userInfo", JSON.stringify(userInfo));
          }
        } else {
          this.$toast(res.msg);
        }
      });
    },
    redirect1() {
      this.$router.push({ name: "PrettyManGirlList", query: { id: this.$route.query.id } });
    },
    redirect2() {
      this.$router.push({ name: "GagsList", query: { id: this.$route.query.id } });
    },
    redirect3() {
      this.$router.push({ name: "ActivityMore", query: { id: this.$route.query.id } });
    },
    redirect4() {
      this.$router.push({ name: "OrganizeFellowship" });
    },
    redirect5() {
      this.$router.push({ name: "BrandMore" });
    },
    goPretty(id) {
      this.$router.push({ name: "PrettyManGirl", query: { id: id } });
    },
    // 进入花絮详情
    goGags(id) {
      this.$router.push({ name: "GagsDetail", query: { id: id } });
    },
    // 进入活动详情
    goActivity(id) {
      this.$router.push({ name: "ActivityDetail", query: { id: id, type: 2 } });
    },
    // 进入联谊详情
    goFellowship(id) {
      this.$router.push({ name: "FellowshipDetail", query: { id: id } });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/home.less");
</style>
